<html lang="zh">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="x5-orientation" content="portrait">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <script src="./lib/clipboard.min.js"></script>
  <link rel="stylesheet" href="./lib/index.css">
  <title>巷尾脱单管理工具</title>
</html>
<body>
<script src="./lib/vue.js"></script>
<!-- import JavaScript -->
<script src="./lib/index.js"></script>
<div id="app">

  <div>
    <textarea style="width: 500px;height: 350px;margin-left: 20px; margin-top: 20px;" v-model="str"></textarea>
  </div>
  <div style="margin: 10px 0px 0px 40px">
    <el-button style="margin-left: 20px;margin-top: 20px;" size="mini" type="primary" @click="start">
      开始生成
    </el-button>
    <el-button style="margin-left: 20px;margin-top: 20px;" size="mini" type="primary" @click="clear">
      清空
    </el-button>
    <el-button id="btn" size="mini" type="primary" @click="copyAndClear('1')">
      一键复制
    </el-button>
    <el-button id="btn" size="mini" type="primary" @click="copyAndClear('2')">
      一键复制并清空
    </el-button>
  </div>

  <table class="pure-table">
    <thead>
    <th v-for="(item,index) in header">{{ item }}</th>
    </thead>
    <tr id="tranStr">
      <td v-for="(value,key) in bsa">{{ value }}</td>
    </tr>
  </table>
</div>

</body>


<script type="application/javascript">


  var app = new Vue({
    el: '#app',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString(),
      header: ['姓名', '出生日期', '身高', '工作', '学历', '学校', '年收入', '语音沟通', '兴趣爱好', '电话号码', '婚况', '籍贯', '居住区域', '有无房车', '家庭情况', '自我评价', '情感经历', '接受朋友圈露脸/不露脸推广', '择偶需求', '是否接受离异','性格测试','给对方介绍话术','阶段备注','历史备注','备注','沟通情况','客户阶段状态','邀约状态','邀约进度','预约时间','预约情况说明','成交产品','匹配最新情况','负责人','协同人','客户阶段','客户分级','重要程度','客户来源','客户标签','创建人','是否归档'],
      bsa: null,
      str: ''
    },
    methods: {
      clear() {
        // 重置输入域和识别结果
        this.str = ''
        this.bsa = ''
      },
      copyAndClear(id) {
        //console.info('aaaaaaa', id)
        let that = this
        let cli = new ClipboardJS('#btn', {
          text(trigger) {
            //console.log(trigger)
            //写入到剪贴板的字符串
            console.info(document.getElementById('tranStr').innerText == '')
            return document.getElementById('tranStr').innerText
          }
        })
        // 复制成功
        cli.on('success', (e) => {
          this.$message({
            showClose: true,
            message: '复制成功',
            type: 'success'
          })
          console.log(e, '复制成功')
          cli.destroy()
          if (id === '2') {
            // 重置输入域和识别结果
            that.str = ''
            that.bsa = ''
          }
        })
        // //复制失败
        cli.on('error', (e) => {
          console.log(e, '复制失败')
          cli.destroy()
        })
      },
      start() {
        var _this = this
        if (_this.str == undefined || _this.str == '') {
          this.$message({
            showClose: true,
            message: '请输入识别文本',
            type: 'warning'
          })
          return
        }
        var infoObj = new Object()
        var infos = _this.str.split('\n')

        //// 开始合并单元格
        var st1 = ''
        var st2 = ''
        var st3 = ''
        var st4 = ''
        console.log("输入数据",infos);
        for (var i = 0; i < infos.length; i++) {
          var item = infos[i].trim()
          // 判断每一项是否合规： 包含【】，且截取后数量=2
          var num = item.indexOf('】')

          if (num > 0 && item.split('】').length == 2) {
            //console.info(item.substr(1, num - 1) + ':' + item.substr(num + 1))
            // 1、提取需要合并的单元格的key，并缓存对应的value值
            let key = item.substr(1, num - 1)
            let value = item.substr(num + 1)
            if (key === '年龄区间') {
              st1 = value + '/'
            } else if (key === '身高区间') {
              st2 = value + '/'
            } else if (key === '学历要求') {
              st3 = value + '/'
            } else if (key === '最看重对方') {
              st4 = value
            } else {
              //2、处理非合并的单元格
              //2.1、处理value无值的情况
              if (value === undefined) {
                infoObj[key] = ''
              } else {
                //2.2、
                infoObj[key] = value
              }
            }
          }
        }

        infoObj['择偶需求'] = st1 + st2 + st3 + st4
        console.info(infoObj)

        // 重新组装数据，处理表头映射、表头空值填充
        let obj = new Object()
        // 遍历header
        for (var i = 0; i < _this.header.length; i++) {
          // 模板表头（用于页面展示的头）
          var header = _this.header[i]
          // 模板表头的映射 -->  解析数据
          if (header === '出生日期') { // web页面的头
            obj[header] = infoObj['出生年月'] // 采集数据的头
          } else if (header === '职业') {
            obj[header] = infoObj['工作']
          } else if (header === '居住地址') {
            obj[header] = infoObj['居住区域']
          } else if (header === '婚况') {
            obj[header] = infoObj['婚姻情况']
          } else if (header === '车房情况') {
            obj[header] = infoObj['有无房车']
          } else if (header === '是否接受推广(给客户表示不用更改)') {
            obj[header] = infoObj['接受朋友圈露脸/不露脸推广']
          } else {
            obj[_this.header[i]] = infoObj[_this.header[i]]
          }
          /* if (infoObj[header] === undefined || infoObj[header] == null) {
            // 转换的数据和表头不匹配时，为表头填充空数据
            obj[header] = ''
          } else {
            // 模板表头的映射 -->  解析数据
            if (header === '出生日期') {
              obj[header] = infoObj['出生年月']
            } else if (header === '工作') {
              obj[header] = infoObj['职业']
            } else if (header === '居住地址') {
              obj[header] = infoObj['居住区域']
            } else if (header === '有无房车') {
              obj[header] = infoObj['车房情况']
            } else if (header === '接受朋友圈露脸/不露脸推广') {
              obj[header] = infoObj['是否接受推广(给客户表示不用更改)']
            } else {
              obj[_this.header[i]] = infoObj[_this.header[i]]
            }
          } */
          /*  var bb = _this.str.replaceAll('\n', '",')
           bb = bb.replaceAll('【', '"')
           bb = bb.replaceAll('】', '":"')
           console.info(bb) */

        }
        _this.bsa = obj
        console.info(obj)
      }
    }
  })
</script>
<style>
    /*https://juejin.cn/post/7182506193556865061*/
    /*给table的单元格新增class属性： cell-class-name。属性不生效时，去掉： scoped 属性 */
    .cellName .cell {
        /*color: red;*/
        /*white-space: pre-line;*/
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 10px 0px 0px 40px;
        text-align: center;
        font-size: 18px;
    }

    td, th {
        padding: 0;
    }

    .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
    }

    .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
    }

    .pure-table td, .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: 12px;
        margin: 0;
        overflow: visible;
        padding: .5em 1em;
    }

    .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
    }

    .pure-table td {
        background-color: transparent;
    }
</style>
